<template>
			<!--DengLuYeMianhtmlStart-->
		
<div id="defaultId1" class=" u09cf5" >
   <div id="gdb17f" class=" u80220" >
      <el-form id="c0ae24" @keydown.enter="submitForm()" class="  u8b1e2 u95c7e" label-width='0px' :model='formData' :rules='formRules' ref='formRef' >
         <div id="c604ee" class="  ua3d02" >
            <img id="c2dd00" class="  u7fd78" src='../../assets/images/logo2.png' alt='guiplan官网' />
         </div>
            <el-form-item id="c742c8" class="  u7575e " prop='userName' >
               <el-input id="c54b19" v-model="formData.userName" class="  ubfc3f " placeholder='请输入用户名' >
               </el-input>
            </el-form-item>
               <el-form-item id="c06c34" class="  u7575e  " prop='password' >
                  <el-input id="c32b88" v-model="formData.password" class="  ubfc3f  u1e8be" placeholder='请输入密码' show-password >
                  </el-input>
               </el-form-item>
                  <el-form-item id="cb4de2" class="  u7575e   u89501" prop='imageCode' size='medium' >
                     <div id="c10c62" class="  u87928" >
                        <el-input id="cf2367" v-model="formData.imageCode" class="  ubfc3f   " placeholder='请输入验证码' >
                        </el-input>
                           <div id="cb769f" @click="getImageCode()" class=" u65329" >
                           <img id="c880a4" class="  u081ac" :src='imgCodeSrc' alt='guiplan官网' />
                           </div>
                     </div>
                  </el-form-item>
                     <el-form-item id="c32a74" class="  u7575e u64d03" >
                        <el-button id="caa3fa" :loading="isSubmitLoading" @click="submitForm()" class="  u8367a u930f6" type='primary' >登录
                        </el-button>
                     </el-form-item>
      </el-form>
   </div>
</div>
		<!--DengLuYeMianhtmlEnd-->
			
</template>
<script>
  import {mapState} from 'vuex'
  import { setPassword,setToken } from '../../utils/auth.js'
  // interfaceCode
    import {findOneGetImageCode,findOneGetUserName,saveUser,findOneUserLogin,findOneUserInfo} from '../../api/user.js'
	import config from '../../config/index.js'
	const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro                            
                             
                             
 
  export default {
    name: '',
	mounted(){
		// defaultLoad
	},
    components: {},
    data () {
      return {
        // insertData
			// DengLuYeMianDataStart
		
				formRules:{
				  userName:[ 
				    { required: true, message: '用户名称不能为空', trigger: 'blur' },
				    { min: 3, max: 20, message: '用户名称字数在 3 到 20 个之间', trigger: 'blur' }
				  ],
				  password:[
				    { required: true, message: '密码不能为空', trigger: 'blur'},
				    { min: 6, max: 30, message: '密码长度在 6 到 30 个字符', trigger: 'blur' }
				  ],
				   imageCode:[
				     { required: true, message: '验证码不能为空', trigger: 'blur'}
				   ] 
				 },
				formData:{
				  userName:'', // 用户名称
				  password:'', // 密码
				  imageCode:''
				},
				imgCodeSrc:baseUrl + '/user/getimagecode?' + Math.random(),
				isSubmitLoading:false
		// DengLuYeMianDataEnd
			
      }
    },
    methods: {
      default (){
      },
      // insertMethod
			// DengLuYeMianMethodStart
		
			async validatorImageCode(rule,value,callback){
				  var isValida =  await new Promise(rule=>{
				    setTimeout(()=>{
				       rule(false)
				    },1000)
				  })
				  if(isValida){
				    callback()
				  }else{
				    callback(new Error('验证码错误'));
				  }
			},
			async validatorPassword2(rule,value,callback){
				if(this.formData.password != value){
				  callback(new Error('两次输入密码不一致!'));
				}else{
				  callback()
				}
			},
			async getImageCode(){
				this.imgCodeSrc = baseUrl + '/user/getimagecode?' + Math.random() // 刷新图片
				
			},
			async submitForm(){
				var validate =(params)=>{
				  return new Promise(rule=>{
				    this.$refs.formRef.validate((valid) => {
				      if (valid) {
				        rule(true) // 检验不通过
				      }else{
				        rule(false)
				      }
				    })
				  })
				}
				// 获取用户信息测试
				
				
				
				this.isSubmitLoading = true
				var valid = await validate()
				if(valid){
				  let password = setPassword(this.formData.password)
				  var params = {
				      userName:this.formData.userName, // 用户名
				      password:password, // 密码
				      imageCode:this.formData.imageCode // 验证码
					}
				  let data = await findOneUserLogin(params)
				  this.isSubmitLoading = false
				  if(data) {
						this.$message({
				          message: '登录成功',
				          type: 'success'
				        })
				    	setToken(data)
				    	let data2 = await findOneUserInfo() // 获取用户信息
				        if(data2) {
				          this.user.userName = data2.userName
				          this.user.userId = data2._id
				          this.user.token = data
				        }else{
				          this.$message.error('用户并未注册');
				          return
				        }
				        console.log(data)
				    	this.$router.push({ name: 'main'})
				  }else{ // 登录失败全部交给服务器弹窗
				    	this.getImageCode()
				  }
				  
				}else{
				   this.$message.error('请填写正确的内容');
				   this.getImageCode()
				   this.isSubmitLoading = false
				}
			}
		// DengLuYeMianMethodEnd
			
      // methodsCode

    },
    computed: {
      ...mapState(['app','user'])
    }
  }
</script>
<style>
			.DengLuYeMiancssStart{}
		
		.u80220{
			display:flex;
			justify-content:center;
			align-items:center;
			height:100vh;
			flex-direction:row;
			background-color:rgba(11, 109, 201, 1);
			}
		.u95c7e{
			width:28em;
			background-color:rgba(248, 248, 248, 1);
			padding-top:2.8em;
			padding-left:2.1em;
			padding-right:2.2em;
			padding-bottom:1em;
			margin-left:1.1em;
			margin-right:1.1em;
			}
		.ua3d02{
			display:flex;
			justify-content:center;
			}
		.u7fd78{
			height:2.7em;
			margin-bottom:1.7em;
			}
		.u87928{
			display:flex;
			}
		.u081ac{
			height:2.5em;
			margin-left:1.5em;
			}
		.u930f6{
			width:100%;
			}
	@media (min-width: 576px) {
			
	}
	@media (min-width: 768px) {
			
	}
	@media (min-width: 992px) {
			
	}
	@media (min-width: 1200px) {
			
	}
		.DengLuYeMiancssEnd{}
			
  /*cssStart*/

  /*cssEnd*/
</style>
